<template>
  <div class="profile-container">
    <el-row :gutter="20">
      <!-- 左侧个人信息卡片 -->
      <el-col :span="8">
        <el-card class="profile-card">
          <div class="profile-header">
            <div class="avatar-wrapper">
              <el-avatar 
                :size="100" 
                :src="userInfo.avatar" 
                @click="handleAvatarClick"
              />
              <div class="avatar-mask">
                <el-icon><Camera /></el-icon>
                <span>更换头像</span>
              </div>
            </div>
            <h2 class="username">{{ userInfo.username }}</h2>
            <p class="role">{{ userInfo.role }}</p>
          </div>
          <div class="profile-info">
            <div class="info-item">
              <el-icon><User /></el-icon>
              <span>账号：{{ userInfo.account }}</span>
            </div>
            <div class="info-item">
              <el-icon><Phone /></el-icon>
              <span>手机：{{ userInfo.phone }}</span>
            </div>
            <div class="info-item">
              <el-icon><Message /></el-icon>
              <span>邮箱：{{ userInfo.email }}</span>
            </div>
            <div class="info-item">
              <el-icon><Clock /></el-icon>
              <span>注册时间：{{ formatDate(userInfo.createTime) }}</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧设置表单 -->
      <el-col :span="16">
        <el-card>
          <template #header>
            <div class="card-header">
              <el-tabs v-model="activeTab">
                <el-tab-pane label="基本设置" name="basic">
                  <template #label>
                    <el-icon><Setting /></el-icon>
                    <span>基本设置</span>
                  </template>
                </el-tab-pane>
                <el-tab-pane label="安全设置" name="security">
                  <template #label>
                    <el-icon><Lock /></el-icon>
                    <span>安全设置</span>
                  </template>
                </el-tab-pane>
                <el-tab-pane label="通知设置" name="notification">
                  <template #label>
                    <el-icon><Bell /></el-icon>
                    <span>通知设置</span>
                  </template>
                </el-tab-pane>
              </el-tabs>
            </div>
          </template>

          <!-- 基本设置表单 -->
          <el-form
            v-if="activeTab === 'basic'"
            ref="basicFormRef"
            :model="basicForm"
            :rules="basicRules"
            label-width="100px"
          >
            <el-form-item label="用户名" prop="username">
              <el-input v-model="basicForm.username" />
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
              <el-input v-model="basicForm.nickname" />
            </el-form-item>
            <el-form-item label="个人简介" prop="bio">
              <el-input
                v-model="basicForm.bio"
                type="textarea"
                :rows="4"
                placeholder="介绍一下自己吧..."
              />
            </el-form-item>
            <el-form-item label="手机号码" prop="phone">
              <el-input v-model="basicForm.phone" />
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="basicForm.email" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="submitBasicForm">保存更改</el-button>
            </el-form-item>
          </el-form>

          <!-- 安全设置表单 -->
          <template v-if="activeTab === 'security'">
            <div class="security-list">
              <div class="security-item">
                <div class="item-left">
                  <div class="title">账户密码</div>
                  <div class="desc">当前密码强度：中</div>
                </div>
                <div class="item-right">
                  <el-button link type="primary" @click="showChangePassword">修改</el-button>
                </div>
              </div>
              <div class="security-item">
                <div class="item-left">
                  <div class="title">手机绑定</div>
                  <div class="desc">已绑定手机：{{ userInfo.phone }}</div>
                </div>
                <div class="item-right">
                  <el-button link type="primary" @click="showChangePhone">修改</el-button>
                </div>
              </div>
              <div class="security-item">
                <div class="item-left">
                  <div class="title">邮箱绑定</div>
                  <div class="desc">已绑定邮箱：{{ userInfo.email }}</div>
                </div>
                <div class="item-right">
                  <el-button link type="primary" @click="showChangeEmail">修改</el-button>
                </div>
              </div>
            </div>
          </template>

          <!-- 通知设置 -->
          <template v-if="activeTab === 'notification'">
            <div class="notification-settings">
              <el-form :model="notificationForm" label-width="120px">
                <el-form-item label="系统消息">
                  <el-switch v-model="notificationForm.system" />
                </el-form-item>
                <el-form-item label="订单通知">
                  <el-switch v-model="notificationForm.order" />
                </el-form-item>
                <el-form-item label="库存预警">
                  <el-switch v-model="notificationForm.inventory" />
                </el-form-item>
                <el-form-item label="站内消息">
                  <el-switch v-model="notificationForm.message" />
                </el-form-item>
                <el-form-item label="通知方式">
                  <el-checkbox-group v-model="notificationForm.methods">
                    <el-checkbox label="email">邮件</el-checkbox>
                    <el-checkbox label="sms">短信</el-checkbox>
                    <el-checkbox label="web">站内通知</el-checkbox>
                  </el-checkbox-group>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="saveNotificationSettings">保存设置</el-button>
                </el-form-item>
              </el-form>
            </div>
          </template>
        </el-card>
      </el-col>
    </el-row>

    <!-- 修改头像对话框 -->
    <el-dialog
      v-model="avatarDialogVisible"
      title="更换头像"
      width="400px"
    >
      <el-upload
        class="avatar-uploader"
        action="/api/upload"
        :show-file-list="false"
        :before-upload="beforeAvatarUpload"
        :on-success="handleAvatarSuccess"
      >
        <img v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar" />
        <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
      </el-upload>
    </el-dialog>

    <!-- 修改密码对话框 -->
    <el-dialog
      v-model="passwordDialogVisible"
      title="修改密码"
      width="400px"
    >
      <el-form
        ref="passwordFormRef"
        :model="passwordForm"
        :rules="passwordRules"
        label-width="100px"
      >
        <el-form-item label="当前密码" prop="oldPassword">
          <el-input
            v-model="passwordForm.oldPassword"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input
            v-model="passwordForm.newPassword"
            type="password"
            show-password
          />
        </el-form-item>
        <el-form-item label="确认密码" prop="confirmPassword">
          <el-input
            v-model="passwordForm.confirmPassword"
            type="password"
            show-password
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="passwordDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitPasswordForm">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { 
  User, Phone, Message, Clock, Camera, Setting, Lock, Bell, Plus 
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import dayjs from 'dayjs'

// 模拟用户数据
const userInfo = reactive({
  username: 'admin',
  role: '系统管理员',
  account: 'admin123',
  phone: '13800138000',
  email: 'admin@example.com',
  avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
  createTime: '2024-01-01 12:00:00'
})

const activeTab = ref('basic')

// 基本设置表单
const basicForm = reactive({
  username: userInfo.username,
  nickname: '管理员',
  bio: '',
  phone: userInfo.phone,
  email: userInfo.email
})

const basicRules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
  ],
  phone: [
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ]
}

// 通知设置表单
const notificationForm = reactive({
  system: true,
  order: true,
  inventory: true,
  message: true,
  methods: ['web']
})

// 头像上传相关
const avatarDialogVisible = ref(false)
const handleAvatarClick = () => {
  avatarDialogVisible.value = true
}

const beforeAvatarUpload = (file: File) => {
  const isJPG = file.type === 'image/jpeg'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG) {
    ElMessage.error('上传头像图片只能是 JPG 格式!')
  }
  if (!isLt2M) {
    ElMessage.error('上传头像图片大小不能超过 2MB!')
  }
  return isJPG && isLt2M
}

const handleAvatarSuccess = (res: any) => {
  userInfo.avatar = res.url
  avatarDialogVisible.value = false
  ElMessage.success('头像更新成功')
}

// 密码修改相关
const passwordDialogVisible = ref(false)
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

const validatePass = (rule: any, value: string, callback: any) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else {
    if (passwordForm.confirmPassword !== '') {
      if (passwordFormRef.value) {
        passwordFormRef.value.validateField('confirmPassword')
      }
    }
    callback()
  }
}

const validatePass2 = (rule: any, value: string, callback: any) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== passwordForm.newPassword) {
    callback(new Error('两次输入密码不一致!'))
  } else {
    callback()
  }
}

const passwordRules = {
  oldPassword: [
    { required: true, message: '请输入当前密码', trigger: 'blur' }
  ],
  newPassword: [
    { validator: validatePass, trigger: 'blur' }
  ],
  confirmPassword: [
    { validator: validatePass2, trigger: 'blur' }
  ]
}

const passwordFormRef = ref()
const showChangePassword = () => {
  passwordDialogVisible.value = true
}

const showChangePhone = () => {
  // 实现手机号修改逻辑
}

const showChangeEmail = () => {
  // 实现邮箱修改逻辑
}

// 表单提交方法
const submitBasicForm = () => {
  ElMessage.success('保存成功')
}

const submitPasswordForm = () => {
  if (passwordFormRef.value) {
    passwordFormRef.value.validate((valid: boolean) => {
      if (valid) {
        ElMessage.success('密码修改成功')
        passwordDialogVisible.value = false
      }
    })
  }
}

const saveNotificationSettings = () => {
  ElMessage.success('设置保存成功')
}

const formatDate = (date: string) => {
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
}
</script>

<style scoped lang="scss">
.profile-container {
  .profile-card {
    .profile-header {
      text-align: center;
      padding: 20px 0;
      
      .avatar-wrapper {
        position: relative;
        display: inline-block;
        margin-bottom: 20px;
        cursor: pointer;
        
        .avatar-mask {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          bottom: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          color: #fff;
          background: rgba(0, 0, 0, 0.5);
          border-radius: 50%;
          opacity: 0;
          transition: all 0.3s;
          
          .el-icon {
            font-size: 24px;
            margin-bottom: 8px;
          }
        }
        
        &:hover .avatar-mask {
          opacity: 1;
        }
      }
      
      .username {
        margin: 10px 0;
        font-size: 20px;
        color: #303133;
      }
      
      .role {
        color: #909399;
        font-size: 14px;
      }
    }
    
    .profile-info {
      padding: 20px;
      
      .info-item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
        color: #606266;
        
        .el-icon {
          margin-right: 8px;
          font-size: 16px;
        }
      }
    }
  }
  
  .security-list {
    .security-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 20px 0;
      border-bottom: 1px solid #ebeef5;
      
      &:last-child {
        border-bottom: none;
      }
      
      .item-left {
        .title {
          font-size: 16px;
          color: #303133;
          margin-bottom: 8px;
        }
        
        .desc {
          color: #909399;
          font-size: 13px;
        }
      }
    }
  }
  
  .notification-settings {
    padding: 20px 0;
  }
}

:deep(.el-tabs__item) {
  display: flex;
  align-items: center;
  
  .el-icon {
    margin-right: 4px;
  }
}

.avatar-uploader {
  text-align: center;
  
  .avatar {
    width: 178px;
    height: 178px;
    border-radius: 6px;
  }
  
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    text-align: center;
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &:hover {
      border-color: #409EFF;
    }
  }
}
</style> 